/* Copyright (C) 2021 minglong@iscas.ac.cn
* 
* Apache License Version 2.0许可头：
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* 
*    http://www.apache.org/licenses/LICENSE-2.0
* 
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
<template>
  <div class="home-wrapper">
    <el-row>
      <el-col :span="24" :offset="0">
        <el-carousel height="400px">
          <el-carousel-item>
              <a href="/pages/000000"><img style="margin: 0 auto;width:100%;" src="/images/banner00.png" /></a>
          </el-carousel-item>
          <el-carousel-item>
              <a href="/activities/930_meetup/"><img style="margin: 0 auto;width:100%;" src="/images/banner01.png" /></a>
          </el-carousel-item>
          <el-carousel-item>
              <a href="https://garden.openatom.cn:8178/mainPlay" target="_blanc"><img style="margin: 0 auto;width:100%;" src="/images/grow.png" /></a>
          </el-carousel-item>
      </el-carousel>
      </el-col>
    </el-row>

    <h2 style="text-align:center;margin-top:100px;">快捷导航</h2>
    <el-row :gutter="24" style="margin-top:50px;">
      <el-col :span="3" :offset="5">
        <a href="/about" ><img style="margin: 0 auto;width:70%;" src="/images/home/about.png" /></a>
      </el-col>
      <el-col :span="3" :offset="1">
        <a href="/pages/00010000/" ><img style="margin: 0 auto;width:70%;" src="/images/home/quickstart.png" /></a>
      </el-col>
      <el-col :span="3" :offset="1">
        <a href="/pages/000000" ><img style="margin: 0 auto;width:70%;" src="/images/home/doc.png" /></a>
      </el-col>
      <el-col :span="3" :offset="1">
        <a href="/community/introduction" ><img style="margin: 0 auto;width:70%;" src="/images/home/commu.png" /></a>
      </el-col>
    </el-row>
    <el-row :gutter="24" style="margin-top:50px;">
      <el-col :span="3" :offset="5">
        <a href="/sig_management" ><img style="margin: 0 auto;width:70%;" src="/images/home/sig.png" /></a>
      </el-col>
      <el-col :span="3" :offset="1">
        <a href="/members" ><img style="margin: 0 auto;width:70%;" src="/images/home/member.png" /></a>
      </el-col>
      <el-col :span="3" :offset="1">
        <a href="/xts" ><img style="margin: 0 auto;width:70%;" src="/images/home/xts.png" /></a>
      </el-col>
      <el-col :span="3" :offset="1">
        <a href="/supported_devices" ><img style="margin: 0 auto;width:70%;" src="/images/home/board.png" /></a>
      </el-col>
    </el-row>
    
    <h2 style="text-align:center;margin-top:100px;">快速上手</h2>
    <el-row :gutter="24" style="margin-top:50px;">
      <el-col :span="14" :offset="6">
        <el-steps direction="vertical" :active="6" style="text-color:black">
          <el-step title="步骤一 安装依赖">
            <span slot="description">
              <code style="color:black">
                <span style="color:orange">sudo apt-get</span> update <span style="color:aqua">&&</span> <span style="color:orange">sudo apt-get install</span> 
                gnutls-bin gcc-arm-linux-gnueabi build-essential fakeroot dpkg-dev git-lfs build-essential gcc g++ make zlib* zip xsltproc  
                x11proto-core-dev wget vim unzip u-boot-tools tzdata texinfo ssh scons python3-minimal python3-setuptools python3-pip python3-distutils python3-apt python3.8-distutils
                npm nfs-kernel-server mtools mtd-utils m4 locales libxml2-utils libx11-dev libreadline-dev libgl1-mesa-dev libffi* libc6-dev-x32 libc6-dev-i386 lib32z-dev lib32ncurses5-dev
                gperf gnupg git-lfs git-core g++-multilib g++ flex dosfstools default-jre default-jdk curl ccache build-essential bison binutils bc genext2fs ruby
              </code>
            </span>
          </el-step>
          <el-step title="步骤二 安装工具: repo">
            <span slot="description">
              <code style="text-align:left;color:black;">
                <span style="color:orange">sudo curl</span> -s https://gitee.com/oschina/repo/raw/fork_flow/repo-py3 > /usr/local/bin/repo <br />
                #默认使用root权限安装至/usr/local/bin,也可以装至其他路径
              </code>
            </span>
          </el-step>
          <el-step title="步骤三 配置git相关参数">
            <span slot="description">
              <code style="color:black;"><span style="color:orange">git</span> config --global user.email <span style="color:green">"xxx@mail.com"</span></code> <br />
              <code style="color:black;"><span style="color:orange">git</span> config --global user.name <span style="color:green">"xxx"</span></code>
            </span>
          </el-step>
          <el-step title="步骤四 创建代码目录并拉取代码">
            <span slot="description">
              <code style="color:black;"><span style="color:orange">mkdir</span> OpenHarmony</code> <br />
              <code style="color:black;"><span style="color:orange">cd</span> OpenHarmony</code> <br />
              <code style="color:black;"><span style="color:orange">repo init</span> -u https://gitee.com/openharmony/manifest.git -b OpenHarmony-3.0-LTS --no-repo-verify</code> <br />
              <code style="color:black;"><span style="color:orange">repo sync</span> -c</code> <br />
              <code style="color:black;"><span style="color:orange">repo forall</span>  -c <span style="color:green">'git lfs pull'</span></code>
            </span>
          </el-step>
          <el-step title="步骤五 下载预编译工具">
            <span slot="description">
              <code style="color:black;">./build/prebuilts_download.sh</code>
            </span>
          </el-step>
          <el-step title="步骤六 运行编译脚本（需自行调整参数）">
            <span slot="description">
              <code style="color:black;">./build.sh</code>
            </span>
          </el-step>
        </el-steps>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import NavLink from "@theme/components/NavLink";
import BScroll from "@better-scroll/core"
import Slide from "@better-scroll/slide"
import MainLayout from '@theme/components/MainLayout'
import PostList from '@theme/components/PostList'
import UpdateArticle from '@theme/components/UpdateArticle'
import Pagination from '@theme/components/Pagination'
import BloggerBar from '@theme/components/BloggerBar'
import CategoriesBar from '@theme/components/CategoriesBar'
import TagsBar from '@theme/components/TagsBar'

const MOBILE_DESKTOP_BREAKPOINT = 720 // refer to config.styl

BScroll.use(Slide)

export default {
  data () {
    return {
      isMQMobile: false,

      slide: null,
      currentPageIndex: 0,
      playTimer: 0,
      mark: 0,

      total: 0, // 总长
      perPage: 10, // 每页长
      currentPage: 1,// 当前页
      activeName: "class_a"
    }
  },
  computed: {
    homeData () {
      return {
        ...this.$page.frontmatter
      }
    },
    hasFeatures () {
      return !!(this.homeData.features && this.homeData.features.length)
    },
    homeSidebarB () {
      const { htmlModules } = this.$themeConfig
      return htmlModules ? htmlModules.homeSidebarB : ''
    },
    showBanner () { // 当分页不在第一页时隐藏banner栏
      return this.$route.query.p
        && this.$route.query.p != 1
        && (!this.homeData.postList || this.homeData.postList === 'detailed')
        ? false : true
    },
    bannerBgStyle () {
      let bannerBg = this.homeData.bannerBg
      if (!bannerBg || bannerBg === 'auto') { // 默认
        if (this.$themeConfig.bodyBgImg) { // 当有bodyBgImg时，不显示背景
          return ''
        } else { // 网格纹背景
          return 'background: rgb(40,40,45) url()'
        }
      } else if (bannerBg === 'none') { // 无背景
        if (this.$themeConfig.bodyBgImg) {
          return ''
        } else {
          return 'background: var(--mainBg);color: var(--textColor)'
        }
      } else if (bannerBg.indexOf('background') > -1) { // 自定义背景样式
        return bannerBg
      } else if (bannerBg.indexOf('.') > -1) { // 大图
        return `background: url(${this.$withBase(bannerBg)}) center center / cover no-repeat`
      }

    },
    actionLink () {
      return {
        link: this.homeData.actionLink,
        text: this.homeData.actionText
      };
    }
  },
  components: { NavLink, MainLayout, PostList, UpdateArticle, BloggerBar, CategoriesBar, TagsBar, Pagination },
  created () {
    this.total = this.$sortPosts.length
  },
  beforeMount () {
    this.isMQMobile = window.innerWidth < MOBILE_DESKTOP_BREAKPOINT ? true : false; // vupress在打包时不能在beforeCreate(),created()访问浏览器api（如window）
  },
  mounted () {
    if (this.$route.query.p) {
      this.currentPage = Number(this.$route.query.p)
    }

    if (this.hasFeatures && this.isMQMobile && (!this.$route.query.p || this.$route.query.p == 1)) {
      this.init()
    }

    if (this.hasFeatures) {
      window.addEventListener('resize', () => {
        this.isMQMobile = window.innerWidth < MOBILE_DESKTOP_BREAKPOINT ? true : false;
        if (this.isMQMobile && !this.slide && !this.mark) {
          this.mark++
          setTimeout(() => {
            this.init()
          }, 60)
        }
      })
    }
  },
  beforeDestroy () {
    clearTimeout(this.playTimer)
    this.slide && this.slide.destroy()
  },
  watch: {
    '$route.query.p' () {
      if (!this.$route.query.p) {
        this.currentPage = 1
      } else {
        this.currentPage = Number(this.$route.query.p)
      }

      if (this.hasFeatures && this.currentPage === 1 && this.isMQMobile) {
        setTimeout(() => {
          this.slide && this.slide.destroy()
          this.init()
        }, 0)
      }
    }
  },
  methods: {
    init () {
      clearTimeout(this.playTimer)
      this.slide = new BScroll(this.$refs.slide, {
        scrollX: true, // x轴滚动
        scrollY: false, // y轴滚动
        slide: {
          loop: true,
          threshold: 100
        },
        useTransition: true, // 使用css3 transition动画
        momentum: false,
        bounce: false, // 回弹
        stopPropagation: false, // 是否阻止事件冒泡
        probeType: 2,
        preventDefault: false
      })

      // user touches the slide area
      this.slide.on('beforeScrollStart', () => {
        clearTimeout(this.playTimer)
      })
      // user touched the slide done
      this.slide.on('scrollEnd', () => {
        this.autoGoNext()
      })
      this.slide.on('slideWillChange', (page) => {
        this.currentPageIndex = page.pageX
      })
      this.autoGoNext()
    },
    autoGoNext () {
      clearTimeout(this.playTimer)
      this.playTimer = setTimeout(() => {
        this.slide.next()
      }, 4000)
    },
    handlePagination (i) { // 分页
      this.currentPage = i
    },
    getScrollTop () {
      return window.pageYOffset
        || document.documentElement.scrollTop
        || document.body.scrollTop
    },
  },

};
</script>

<style lang="stylus" scoped>
.home-wrapper
  .banner
    width 100%
    min-height 450px
    margin-top $navbarHeight
    color $bannerTextColor
    position relative
    overflow hidden
    .banner-conent
      max-width $homePageWidth
      margin 0px auto
      position relative
      z-index 1
      overflow hidden
      .hero
        text-align center
        margin-top 3rem
        img
          max-width 100%
          max-height 240px
          display block
          margin 2rem auto 1.5rem
        h1
          margin 0
          font-size 3.2rem
        .description, .action
          margin 1.5rem auto
        .description
          max-width 40rem
          font-size 1.1rem
          line-height 1.3
          opacity 0.9
        .action-button
          display inline-block
          font-size 1.2rem
          background-color $accentColor
          padding 0.8rem 1.6rem
          border-radius 4px
          transition background-color 0.1s ease
          box-sizing border-box
          border-bottom 1px solid darken($accentColor, 10%)
          color #fff
          &:hover
            background-color lighten($accentColor, 10%)
      // pc端features
      .features
        padding 2rem 0
        margin-top 2.5rem
        display flex
        flex-wrap wrap
        align-items flex-start
        align-content stretch
        justify-content space-between
      .feature
        flex-grow 1
        flex-basis 30%
        max-width 30%
        text-align center
        a
          // color lighten($bannerTextColor,10%)
          color inherit
          .feature-img
            width 10rem
            height 10rem
            animation heart 1.2s ease-in-out 0s infinite alternate
            animation-play-state paused
          h2
            font-weight 500
            font-size 1.3rem
            border-bottom none
            padding-bottom 0
          p
            opacity 0.8
            padding 0 0.8rem
      .feature:hover
        .feature-img
          animation-play-state running
        h2, p
          color $accentColor
    // 移动端滑动图标
    .slide-banner
      margin-top 2rem
      .banner-wrapper
        position relative
      .slide-banner-scroll
        min-height 1px
        overflow hidden
      .slide-banner-wrapper
        height 300px
        .slide-item
          display inline-block
          height 300px
          width 100%
          text-align center
          a
            // color lighten($bannerTextColor,10%)
            color inherit
            .feature-img
              width 10rem
              height 10rem
            h2
              font-size 1.1rem
              font-weight 500
              border-bottom none
              padding-bottom 0
            p
              opacity 0.8
              padding 0 0.8rem
      .docs-wrapper
        position absolute
        bottom 25px
        left 50%
        transform translateX(-50%)
        .doc
          display inline-block
          margin 0 4px
          width 8px
          height 8px
          border-radius 50%
          background var(--textColor)
          opacity 0.9
          &.active
            opacity 0.5
  // 分页不在第一页时，隐藏banner栏
  .banner.hide-banner
    display none
    & + .main-wrapper
      margin-top: ($navbarHeight + 0.9rem)
  .main-wrapper
    margin-top 2rem
    .main-left
      .card-box
        margin-bottom 0.9rem
      .pagination
        margin-bottom 4rem
      .theme-vdoing-content
        padding 0 2rem
        overflow hidden
        &>:first-child
          padding-top 2rem
        &>:last-child
          padding-bottom 2rem
    .main-right
      .custom-html-box
        padding 0
        overflow hidden
@keyframes heart
  from
    transform translate(0, 0)
  to
    transform translate(0, 8px)
// 1025px以下
@media (max-width 1025px)
  .home-wrapper
    .banner
      .banner-conent
        .hero
          h1
            font-size 2.5rem
          .description
            font-size 1rem
        .feature
          a
            h2
              font-size 1.1rem
            .feature-img
              width 9rem
              height 9rem
// 719px以下
@media (max-width $MQMobile)
  .home-wrapper
    .banner
      .banner-conent
        .features
          display none !important
// 419px以下
@media (max-width $MQMobileNarrow)
  .home-wrapper
    .banner-conent
      padding-left 1.5rem
      padding-right 1.5rem
      .hero
        img
          max-height 210px
          margin 2rem auto 1.2rem
        h1
          font-size 2rem
        h1, .description, .action
          margin 1.2rem auto
        .description
          font-size 1.2rem
        .action-button
          font-size 1rem
          padding 0.6rem 1.2rem
      .feature
        h2
          font-size 1.25rem
</style>
